<template>
  <div v-loading="loading" class="PublicizeSettingCourseEdit">
    <div class="header">
      <div class="setting-title">课程信息</div>
    </div>
    <div class="course-form">
      <el-scrollbar height="100%">
        <el-form ref="formRef" :model="formModel" :rules="rules" label-width="auto">
          <el-form-item label="封面：" prop="coverUrl">
            <!-- <img style="width: 313px;height: 170px;" :src="reviewUrl" fit="cover"> -->
            <el-image style="width: 313px;height: 170px;" :src="reviewUrl" fit="cover">
              <template #error>
                <img style="width: 100%;height: 100%;" src="/images/course_default.png" fit="cover">
              </template>
            </el-image>
          </el-form-item>
          <el-form-item label="上传封面：" prop="name">
            <el-row>
              <el-col :span="24"><el-button type="primary" @click="uploadEvent">点击上传</el-button></el-col>
              <el-col :span="24"><span class="upload-desc">请上传png、jpg类型文件，文件大小不超过40M。</span></el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="课程名称：" prop="title">
            <el-input v-model="formModel.title" style="width: 80%;" maxlength="255" show-word-limit />
          </el-form-item>
          <el-form-item label="课程类型：" prop="type">
            <el-select v-model="formModel.type" placeholder="请选择课程类型">
              <el-option v-for="item in typeOptions" :key="item.id" :label="item.courseTypeName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="课程状态：" prop="status">
            <el-radio-group v-model="formModel.status">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="课程时长：" prop="minute">
            <el-input-number v-model="formModel.minute" :min="1" controls-position="right" style="width: 80%;" />
          </el-form-item>
          <el-form-item label="课程简介：" prop="description">
            <el-input v-model="formModel.description" :rows="6" type="textarea" resize="none" maxlength="255"
              show-word-limit style="width: 80%;" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <div class="button">
      <el-button type="primary" @click="router.back()" style="color: #8B8B8B;" text bg>返 回</el-button>
      <el-button type="primary" round @click="submit">保 存</el-button>
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeSettingCourseEdit' }
</script>
<script setup>
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { uploadFile } from '@/utils/file.js'
import { imgReview, getImageUrl } from '@/utils/index.js'
import { http } from '@/utils/http/index.js'
import { ContentTypeEnum } from '@/enums/httpEnum';
import { ElMessage } from 'element-plus';
import { clone } from 'xe-utils'
import { useAuthStore } from '@/stores/modules/auth';
const authStore = useAuthStore()

const router = useRouter()
const route = useRoute()
if (!route.query.type) router.back()

const reviewUrl = ref('')
const formModel = reactive({ coverUrl: '', title: '', minute: '', type: '', status: 1, description: '' })
const rules = ref({
  coverUrl: [{ required: true, message: '请上传封面', trigger: 'blur' }],
  title: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择课程类型', trigger: 'blur' }],
  status: [{ required: true, message: '请选择课程状态', trigger: 'blur' }],
  minute: [{ required: true, message: '请输入课程时长', trigger: 'blur' }],
  description: [{ required: true, message: '请输入课程描述', trigger: 'blur' }],
})
const loading = ref(false)
/**获取课程类型 */
const typeOptions = ref([])
http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
  if (res.isError) return
  typeOptions.value = res.result.dataLst
})

/**获取专家课程信息 */
const hasModifyPic = ref(false)
if (route.query.type == 'edit') {
  loading.value = true
  http.$GET('/Preach/GetPreachCourseDetail', { id: route.query.id, }).then(res => {
    if (res.isError) return
    reviewUrl.value = getImageUrl(res.result.courseData.coverUrl)
    formModel.courseId = res.result.courseData.id
    formModel.coverUrl = res.result.courseData.coverUrl
    formModel.title = res.result.courseData.title
    formModel.type = res.result.courseData.type
    formModel.status = res.result.courseData.status
    formModel.minute = res.result.courseData.minute
    formModel.description = res.result.courseData.description
  }).finally(() => loading.value = false)
}
const uploadEvent = () => {
  uploadFile({ accept: '.jpg,.jpeg,.png' }).then(([file]) => {
    formModel.coverUrl = file
    hasModifyPic.value = true
    imgReview(file).then(fileUrl => reviewUrl.value = fileUrl)
  })
}

const formRef = ref(null)
const submit = () => {
  formRef.value.validate(valid => {
    if (!valid) return
    loading.value = true
    const submitData = clone(formModel, true)
    /**编辑模式下。图片没有改变则不用上传 */
    if (route.query.type == 'edit' && !hasModifyPic.value) {
      delete submitData.coverUrl
    }
    http.$POST(
      '/Preach/AddOrUpdatePreachExpertCourse',
      { ...submitData, uid: authStore.userInfo.expertId },
      { headers: { 'Content-Type': ContentTypeEnum.FORM_DATA } }
    ).then(res => {
      if (res.isError) return ElMessage.warning(res.message)
      ElMessage.success(res.message)
      router.push('/personal-center/publicize-course-manage')
    }).finally(() => loading.value = false)
  })
}

</script>
<style lang='scss' scoped>
.PublicizeSettingCourseEdit {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .header {
    height: 54px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    font-size: 16px;
    font-weight: normal;
    color: #666666;
  }

  .setting-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }

  .course-form {
    flex: 1;
    margin-top: 10px;
    padding: 0 64px;
    overflow: hidden;

    .upload-desc {
      font-size: 12px;
      color: #ACACAC;
    }
  }

  .button {
    text-align: center;
    margin-bottom: 22px;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }
}
</style>